<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆</title>
<link rel="stylesheet"
	href="index.css">
<script src="vue.js"></script>
<script src="index.js"></script>
<script src="axios.min.js"></script>
</head>
<body>
	<div id="app" style="width: 500px;">
		<el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
			<el-form-item label="用户名" prop="username"> 
				<el-input type="text" v-model="ruleForm2.username" auto-complete="off"></el-input>
			</el-form-item> 
			<el-form-item label="密码" prop="pass"> 
				<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
			</el-form-item> 
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm2')">登录</el-button>
				<el-button @click="resetForm('ruleForm2')">重置</el-button> 
			</el-form-item>
		</el-form>
	</div>
</body>
<script>
new Vue({
    el: '#app',
    data: function() {
        var validatePass = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入密码'));
          } else {
        	callback();
          }
        };
        var validateUsername = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入用户名'));
          } else {
        	callback();
          }
        };
    	return {
    		ruleForm2: {
    	        pass: '',
    	        username: ''
    	    },
    	    rules2: {
    	        pass: [
    	          { validator: validatePass, trigger: 'blur' }
    	        ],
    	        username: [
    	          { validator: validateUsername, trigger: 'blur' }
    	        ]
    	    }
    	}
    },
    methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.login();
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        },
        login:function(){
    		var that = this;
    		axios.post('http://192.168.31.244:2001/spring-cloud-multiple-demo-user-provider/login', that.ruleForm2)
    		  .then(function (response) {
    		    if(response.data.code == 200){
    		    	console.log(response.data)
    		    	var token = response.data.data.token;
    		    	localStorage.setItem("token", token);
    		    	window.location.href="/";
    		    } else {
    		    	alert(response.data.message);
    		    }
    		  })
    		  .catch(function (error) {
    		    console.log(error);
    		  });
    	}
      }
})
</script>
</html>